import {useState} from 'react'
import {connect} from 'react-redux'
import {
  incrementAction,
  decrementAction,
  incrementAsyncAction
} from '../../redux/actions/counter'
/* 
分析当前组件需要与redux做哪些交互
1. 得到 store中state中的count    count
2. 同步增加store中state中的count  dispatchIncrement
3. 同步减少store中state中的count  dispatchDecrement
4. 异步增加store中state中的count  dispatchIncmentAsync
*/
function Counter({
  count,
  dispatchIncrement,
  dispatchDecrement,
  dispatchIncmentAsync
}) {

  // 读取store中state的count
  // const {count} = store.getState()

  // const [count, setCount] = useState(0)

  const [num, setNum] = useState(1)

  function increment () {
    // 分发增加的action, 来更新count
    // store.dispatch(incrementAction(num))
    dispatchIncrement(num)
  }
  function decrement () {
    // 分发减少的action, 来更新count
    // store.dispatch(decrementAction(num))
    dispatchDecrement(num)
  }
  function incrementIfOdd () {
    if (count%2===1) {
      increment()
    }
  }
  function incrementAsync () {
    /* setTimeout(() => {
      increment()
    }, 1000); */
    // setTimeout(increment, 1000)
    // 分发异步action (函数类型的action)
    // store.dispatch(incrementAsyncAction(num))  
    dispatchIncmentAsync(num)
  }

  return (
    <>
      <h3>点击次数: {count}</h3>
      <select value={num} onChange={e => setNum(e.target.value * 1)}>
        <option value="1" key="a">1</option>
        <option value="2" key="b">2</option>
        <option value="3" key="c">3</option>
      </select>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
      <button onClick={incrementIfOdd}>奇数增加</button>
      <button onClick={incrementAsync}>延迟1S增加</button>
    </>
  )
}

/* 
根据state映射/绑定传递给目标组件(Counter)的一般属性
返回对象, 对象中的属性就是要传递给目标组件的属性
*/
function mapStateToProps(state) { // store.getState()
  return {
    count: state.count
  }
}

/* 
利用dispatch函数映射/绑定传递给目标组件(Counter)的函数属性
函数内部要调用dispatch更新状态
返回对象, 对象中包含一些方法, 方法中调用dispatch去更新状态
  方法名是传递给目标组件的属性的属性名
  方法体函数就是传递给目标组件的属性的函数
*/
function mapDispatchToProps(dispatch) {
  return {
    dispatchIncrement (num) {
      dispatch(incrementAction(num))
    },
    dispatchDecrement: num => dispatch(decrementAction(num)),
    dispatchIncmentAsync: num => dispatch(incrementAsyncAction(num)),
  }
}

/* const mapDispatchToProps = {
  dispatchIncrement: incrementAction,
  dispatchDecrement: decrementAction,
  dispatchIncmentAsync: incrementAsyncAction,
} */

// 连接store对象, 返回一个用于连接目标组件的函数
// 提前绑定好后面需要传递给目标组件的所有属性
const conenctToStore = connect(
  // 指定非函数属性 => 读取状态数据
  mapStateToProps,
  // 指定函数属性 => 更新状态数据
  mapDispatchToProps
)

// 连接上目标组件, 返回一个包含目标组件的新组件
// 新组件的责任: 向目标组件传入前面绑定好属性
const ConnectComponent = conenctToStore(Counter)

// 向外暴露产生的新组件
export default ConnectComponent

/* export default connect(
  // 绑定读取state的count属性
  state => ({count: state.count}),
  // 绑定更新state的三个函数属性
  {
    dispatchIncrement: incrementAction,
    dispatchDecrement: decrementAction,
    dispatchIncmentAsync: incrementAsyncAction
  }
)(Counter) */